<template>
   <div class="swiper">
    <div class="swiper-container swiper-banner">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item,index) in bannerList" :key="index">
              <img :src="item.img" alt="">
            </div>
        </div>
         <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.css'
export default {
  props: ['bannerList'],
  data () {
    return {
      myswiper: null
    }
  },
  methods: {
    initSwiper () {
      this.mySwiper = new Swiper('.swiper-banner', {
        autoplay: {
          delay: 1500,
          stopOnLastSlide: false,
          disableOnInteraction: true
        },
        loop: true, // 循环模式选项
        autoplayDisableOnInteraction: false, // 在点击之后可以继续实现轮播
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination'
        }

      })
    }
  },
  mounted () {

  },
  watch: {
    // 判断数据有没有回来 再对swiper进行初始化
    bannerList (newval) {
      if (newval.length !== 0) {
        this.$nextTick(function () {
          this.initSwiper()
        })
      }
    }
  }
}
</script>

<style lang='less' scoped>
.swiper{
  width: 100%;
}
.swiper-banner{
  width: 100%;
  height: 1.38rem;
  img{
    width: 100%;
    height: 100%;
  }
}
</style>
